<template>
	<view  style="padding-bottom: 100upx;overflow-x: hidden;">
			<view class="author">
				<image :src="logourl" class="logo" @click="prview" mode="widthFix"></image>
				<text  class="author-text">{{name  }}  </text><text style="font-size: 25upx;margin-left: 10upx;">{{$u.timeFrom(time, true)}}</text>
				<image  @click="deleteImage" v-if="myphoto" src="../../static/delete.png" mode="widthFix" class="deletelogo"></image>
			</view>
			
		<view  @tap="doubleClick" class="photo">
			<image :src="imageurl" mode="widthFix"></image>
			<view class="light">
				<image v-if="zan" src="../../static/light1.png" mode="widthFix"></image>
			</view>
		</view>
		<view style=" position: relative; width: 1000upx;" class="title">
			<text style="font-size: 40upx;font-weight: 700;">{{title}}</text>
		</view>
		<view style="margin-top: 20upx;" class="text title">
			<text >{{text}}</text>
		</view>
		
		<view class="title comment">
			<image src="../../static/light.png" style="width: 30upx;height: 30upx;float: left;margin-top: 5upx;" mode="widthFix"></image><text style="font-size: 30upx;font-weight: 600;margin-left: 10upx;">共获得{{lightcount}}个闪电</text>
		</view>
		<view  style="margin-top: 25upx;" class="title comment">
			<image src="../../static/pinglun.png" style="width: 30upx;height: 30upx;float: left;margin-top: 5upx;" mode="widthFix"></image><text style="font-size: 30upx;font-weight: 600;margin-left: 10upx;">评论({{count_comment}})</text>
			<view @longtap="deleteComment(item.userid,item.Nid)" v-for="(item,index) in commentList" class="comment_body">
				<image style="height: auto;" class="commentImage" :src="item.logourl"  mode="widthFix"></image>
				<text style="font-size: 30upx; font-weight: 600;line-height: 40upx;">{{item.name}}</text></br>
				<view style="margin-left: 80upx;" class="">
					<text style="font-size: 28upx; color: #555555;">{{item.comment}}</text>
				</view>
				
				
			</view>
			
		</view>
		
		<view class="mycommemt">
			<view class="mucomment_body">
				<input confirm-type="search" @confirm="doSearch" style="list-style: none;" type="text" v-model="comment" placeholder="发表评论" />
			</view>
		</view>
	</view>
</template>

<script>
	
	import http from '../../utils/http.js';
	export default {
		data() {
			return {
				id:"",
				logourl:"",
				name:"",
				title:"",
				text:"",
				imageurl:"",
				imageList:[],
				comment:"",
				commentList:[],
				count_comment:"",
				thistime:0,
				zan:false,
				lightcount:"0",
				myphoto:false,
				timestamp: '1581170184',
				time:null
			}
		},
		onLoad(options) {
		    console.log(options.url);
					 this.id = options.url;
		   },
		   onPullDownRefresh() {
		           //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		           console.log('refresh');
		           setTimeout(function () {
		               uni.stopPullDownRefresh();  //停止下拉刷新动画
		           }, 1000);
		       },
		onShow:function(){
			var that = this;
			
			http.showOnePhoto({
				id:that.id
			}).then(list=>{
				console.log(list);
				that.imageList = list.data;
				console.log(that.imageList[0])
				that.logourl = that.imageList[0].logourl;
				that.name = that.imageList[0].name;
				that.imageurl = that.imageList[0].imageurl;
				that.title = that.imageList[0].title;
				that.text = that.imageList[0].context;
				that.time = that.imageList[0].datetime;
				that.time=that.time.replace("/Date("," ");
				that.time = that.time.substr(0,that.time.length-5);
				console.log("时间为",that.time)
				uni.setNavigationBarTitle({
				title:'广场 | '+that.name
				})
				if(that.imageList[0].userid==uni.getStorageSync("openid")){
					that.myphoto = true;
				}
				
				//显示评论
				http.showComment({
					id:that.id
				}).then(list=>{
					console.log(list);
					that.commentList = list.data;
					that.count_comment = that.commentList.length;
					if(that.count_comment==0){
						that.count_comment="0";
					}
				})
			})
			that.count_comment = that.commentList.length;
			http.countGood({
				id:that.id
			}).then(list=>{
				console.log("数量是",list);
				that.lightcount = list.data;
			})
		},
		methods: {
			
			doSearch:function(){
				if(uni.getStorageSync("openid").length==0){
					uni.showToast({
						title:"请先登录",
						duration:1500,
						icon:"none"
					})
				}else{
					if(this.comment==null){
					uni.showToast({
						title:"评论不能为空",
						duration:1000
						
					})
				}else{
					//获取时间
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				
				var that  = this;
				http.addComment({
					id:that.id,
					userid:uni.getStorageSync("openid"),
					name:uni.getStorageSync("name"),
					comment:that.comment,
					year:year,
					month:month,
					day:day+" ",
					hour:hour,
					min:minute,
					second:second,
					logourl:uni.getStorageSync("logourl")
				}).then(list=>{
					that.comment = ""
					console.log(that.id,uni.getStorageSync("openid"),uni.getStorageSync("name"),that.comment,year,month,day,hour,minute,second)
					console.log(list);
					//显示评论
					http.showComment({
						id:that.id
					}).then(list=>{
						console.log(list);
						that.commentList = list.data;
						that.count_comment = that.commentList.length;
					})
				})
				}
				}
				
				
			},
			doubleClick: function (e) {
				if(uni.getStorageSync("openid").length==0){
					uni.showToast({
						title:"请先登录",
						duration:1500,
						icon:"none"
					})
				}else{
						var that = this;
				if(that.thistime==0){
				var Tabtime = new Date().getTime();
				that.thistime = Tabtime;
				
				}else{
					var Tabtime = new Date().getTime();
					console.log(Tabtime-that.thistime);
					if(Tabtime-that.thistime<500){
						console.log("这是双击事件");
						that.thistime = new Date().getTime();
						that.zan = true;
						setTimeout(function(){
							that.zan = false;
						},500)
						console.log(that.id,",",uni.getStorageSync("openid"))
						http.addGood({
							id:that.id,
							userid:uni.getStorageSync("openid")
						}).then(list=>{
							console.log(list);
							if(list.data=="0"){
								http.addGood1({
									id:that.id,
									userid:uni.getStorageSync("openid")
								}).then(list=>{
									http.countGood({
										id:that.id
									}).then(list=>{
										console.log("数量是",list);
										that.lightcount = list.data;
									})
								})
							}
							
						})
						
						}else{
							if(this.myphoto==true){
							var that = this;
							uni.previewImage({
								current:1,
								urls:that.imageurl,
								loop:true,
								indicator:"default"
							})
							}
							console.log("单击事件")
							that.thistime=new Date().getTime();
						}
				}
				
				}
			

				},
			deleteImage:function(){
				var that = this;
				console.log("删除");
				http.deleteImage({
					id:that.id
				}).then(list=>{
					http.deleteComment({
						id:that.id
					}).then(list=>{
						
					})
					http.deleteGood({
						id:that.id
					}).then(list=>{
						uni.navigateBack()
						uni.showToast({
							title:"删除成功",
							duration:1500
						})
					})
					
				})
			},
			deleteComment:function(userid,Nid){
				var that = this;
				if(userid==uni.getStorageSync("openid")){
					uni.showModal({
					    title: '提示',
					    content: '要删除该评论吗',
					    success: function (res) {
					        if (res.confirm) {
					            http.deleteMyComment({
									Nid:Nid
								}).then(list=>{
									//显示评论
									http.showComment({
										id:that.id
									}).then(list=>{
										console.log(list);
										that.commentList = list.data;
										that.count_comment = that.commentList.length;
									})
									console.log(list);
									uni.showToast({
										title:"删除成功",
										duration:1000
									})
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
			}
		},
		
	}
</script>

<style scoped>
	image{
		width: 100%;
	}
.photo{
	width: 100%;
	margin: 0 auto;
	margin-top: 30upx;
	position: relative;
}

.title{
	margin-top: 30upx;
	margin-left: 40upx;
	margin-right: 40upx;
	font-size: 30upx;
	letter-spacing:2upx;
}
.comment_body{
	width: 95%;
	height: auto;
	margin: 0 auto;
	margin-top: 20upx;
	margin-bottom: 20upx;
	padding: 20upx;
	position: relative;
	border-bottom: 1px solid #C8C7CC;
}
.mycommemt{
	width: 100%;
	height: 60upx;
	padding-bottom: 20upx;
	position: fixed;
	bottom: 0upx;
	position: fixed;
	background-color: #fffff;
	z-index: 100;
}
.commentImage{
	float: left;
	width: 60upx;
	border-radius: 30upx;
	margin-right: 20upx;
}
.mucomment_body{
	width: 90%;
	margin: 0 auto;
	height: 50upx;
	background-color: #f3f3f3;
	padding: 10upx;
	border-radius: 10upx;
	font-size: 30upx;
	line-height: 70upx;
}
input{
	margin-left: 20upx;
}
.author{
	margin-top: 30upx;
	margin-left: 40upx;
	margin-right: 40upx;
	width: 100%;
}
.author .logo{
	width: 60upx;
	height: 60upx;
	float: left;
	border-radius: 30upx;
}
.deletelogo{
	width: 40upx;
	height: 40upx;
	float:right;
	margin-right: 80upx;
	margin-top: 10upx;
}
.author-text{
	font-weight: 600;
	font-size: 30upx;
	line-height: 60upx;
	margin-left: 30upx;
}
.time{
	float: right;
	font-size: 30upx;
}
.light{
	width: 400upx;
	height: 400upx;
	position: absolute;
	top: 50%;
	margin-top: -200upx;
	left: 50%;
	margin-left: -200upx;
	animation: fade-in;/*动画名称*/
	animation-duration: 0.5s;/*动画持续时间*/  
	-webkit-animation:fade-in 1.5s;/*针对webkit内核*/  

}
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  

</style>
